<template>
 <div>
    <div class="input-container">
      <span class="label">新密码：</span>
      <input
        v-model="password"
        :type="showPassword ? 'text' : 'password'"
        placeholder="请输入新的密码"
        class="input-field"
        @focus="hidePlaceholder"
      />
      <span class="show-password-icon" @click="togglePasswordVisibility">
        <img class="image" v-if="showPassword" src="/static/项目图片/眼睛_显示.png" alt="显示密码" />
        <img v-else src="/static/项目图片/眼睛_隐藏.png" alt="隐藏密码" />
      </span>
    </div>
    <div class="hint-text">密码长度最小为6位最大为15位哦</div>
    <div class="button-wrapper">
      <button @click="confirmpassword" class="submit-button">提交</button>
    </div>
	<!-- 弹窗 -->
	    <div class="overlay" v-show="showAlert">
	      <div class="alert">
	        <span class="span">{{ alertMessage }}</span>
	        <button class="button" @click="closeAlert">我知道了</button>
	      </div>
	    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
      showPassword: false,
	  showPlaceholder: true,
	  showAlert: false, // 控制弹窗的显示和隐藏
	  alertMessage: '', // 弹窗显示的警告信息
    };
  },
  mounted() {
      this.setNavigationBarTitle('修改密码界面');
    },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
	hidePlaceholder() {
	  this.showPlaceholder = false;
	},
	confirmpassword() {
	  const passwordPattern = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z0-9]{6,15}$/;
	  if (!passwordPattern.test(this.password)) {
	    this.showAlert = true; // 显示弹窗
	    this.alertMessage = '密码输入格式不正确，要求最少6位最大15位英文字母和数字组合而成哦！';
	    return;
	  }
	
	  // 在这里添加提交密码的逻辑
	  console.log(this.password);
	},
	 //小窗的关闭与打开
	 closeAlert() {
	     this.showAlert = false; // 关闭弹窗
	     this.resetFields();
	   },
	   resetFields() {
	     this.password = ''; // 重置密码字段
	     this.showPassword = false; // 重置显示密码的状态
	     this.showPlaceholder = true; // 重置占位符显示的状态
	   },
	   //下面是判断是否在小程序的环境下
	   setNavigationBarTitle(title) {
	         // 判断是否在微信小程序环境中
	         if (typeof wx !== 'undefined' && wx.setNavigationBarTitle) {
	           wx.setNavigationBarTitle({
	             title: title,
	           });
	         }
	       },
	 },
};
</script>

<style>
.input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 2px solid red;
  border-radius: 5px;
  width: 80%;
  margin: 0 auto;
  height: 30px;
}

.label {
  color: #333;
  margin-right: 5px;
}

.input-field {
  flex: 1;
  padding: 5px;
  border: none;
  height: 50px;
  margin-left: -18px;
  font-size:13px;
  margin-top: 3px;
}

.show-password-icon {
  cursor: pointer;
  margin-left: 10px;
}

.image {
  width: 20px;
  height: 20px;
  margin-top: 6px;
}
/*输入框下方的那行小字*/
.hint-text {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  margin-bottom: 10px;
  text-align: center;
}

.button-wrapper {
  width: 100%; /* 按钮宽度与输入框相同 */
  display: flex;
  justify-content: center;
  margin-top: 0px; /* 调整按钮的上边距 */
}

.submit-button {
  padding: 5px 10px;
  background-color: #ffb6c1; /* 修改提交按钮的背景为粉红色 */
  color: #000; /* 修改提交按钮的文字颜色为黑色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 50px;
  width: 80px;
  text-align: center; /* 将提交按钮中的文字居中对齐 */
}
/*小窗的CSS样式*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.alert {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.span {
  display: block;
  margin-bottom: 10px;
}

.alert button {
  padding: 8px 16px;
  background-color: #ffb6c1;
  color: #000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
